<template>
	<view class="container">
		<u-sticky v-if="!isMap">
			<view class="filter-box">
				<view class="filter">
					<text @click="isMap=false" :class="{'active':!isMap}">列表</text>
					<text @click="isMap=true" :class="{'active':isMap}">地图</text>
				</view>
			</view>
		</u-sticky>
		<view class="list" v-if="!isMap">
			<view class="roads">
				<view class="road" v-for="it in 6">
					<image src="/static/images/road-demo1.png" mode="widthFix"></image>
					<view class="c-content">
						<view class="c-title">无障碍路线图</view>
						<view class="c-desc">
							<text>点击查看详情</text>
							<text>1.4公里</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<map v-else style="width: 100%; height: 100vh;" @tap='handleMapClick' @callouttap='handleClickMarker'
			@markertap='handleClickMarker' :latitude="latitude" :longitude="longitude" :markers="covers">
			<cover-view class="map-filter">
				<cover-view class="filter">
					<cover-view @click="isMap=false" :class="{'active':!isMap}">列表</cover-view>
					<cover-view @click="isMap=true" :class="{'active':isMap}">地图</cover-view>
				</cover-view>
			</cover-view>
			<cover-view class="map-scan" @click="handleNavToPay" :style="{bottom: selectMarkerId?'300rpx':'30rpx'}">
				扫码使用
			</cover-view>
			<cover-view class="covers-content" v-show="selectMarkerId">
				<cover-view class="road">
					<cover-image src="/static/images/road-demo1.png" mode="widthFix"></cover-image>
					<cover-view class="c-content">
						<cover-view class="c-title">无障碍路线图</cover-view>
						<cover-view class="c-desc">点击查看</cover-view>
					</cover-view>
				</cover-view>
			</cover-view>
		</map>

		<button v-if="!isMap" class="scan" @click="handleNavToDetail">扫码使用</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isMap: false,
				latitude: 39.909,
				longitude: 116.39742,
				selectMarkerId: '',
				covers: [{
					id: 1,
					latitude: 39.909,
					longitude: 116.39742,
					width: 20,
					height: 20,
					iconPath: '../../static/logo.png',
					callout: {
						content: "1", // 车牌信息
						display: "ALWAYS",
						fontWeight: "bold",
						color: "#fff", //文本颜色
						fontSize: "12px",
						bgColor: "rgba(114,96,72)", //背景色
						padding: 5, //文本边缘留白
						textAlign: "center",
					},
				}, {
					id: 2,
					latitude: 39.909,
					longitude: 116.38742,
					width: 20,
					height: 20,
					iconPath: '../../static/logo.png',
					callout: {
						content: "2", // 车牌信息
						display: "ALWAYS",
						fontWeight: "bold",
						color: "#fff", //文本颜色
						fontSize: "12px",
						bgColor: "rgba(114,96,72)", //背景色
						padding: 5, //文本边缘留白
						textAlign: "center",
					},
				}],
			};
		},
		methods: {
			handleNavToPay() {
				uni.navigateTo({
					url: '/pages/device/devicePay/devicePay'
				})
			},
			handleNavToDetail() {
				uni.navigateTo({
					url: '/pages/device/deviceDetail/deviceDetail'
				})
			},
			handleMapClick() {
				this.selectMarkerId = ''
			},
			handleClickMarker(e) {
				this.selectMarkerId = e.detail.markerId
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: $uni-color-bg;
		min-height: 100vh;
		padding-bottom: 120upx;
		box-sizing: border-box;

		.filter-box {
			width: 100%;
			padding-top: 22upx;
			background-color: $uni-color-bg;
		}

		.filter {
			background-color: #fff;
			border-radius: 30upx;
			width: 280upx;
			display: flex;
			margin: 0 auto;
			margin-bottom: 0;
			align-items: center;

			text {
				border-radius: 30upx;
				width: 140upx;
				padding: 12upx 0;
				text-align: center;
				box-sizing: border-box;
			}

			.active {
				background-color: $uni-color-bg-z;
				color: #fff;
			}
		}

		.roads {
			padding: 22upx 0;
			box-sizing: border-box;
			// background-color: #fff;

			.road {
				display: flex;
				align-items: center;
				padding: 22upx 30upx;
				box-sizing: border-box;
				border-bottom: 1upx solid $uni-color-bg-s;

				image {
					width: 160upx;
				}

				.c-content {
					display: flex;
					flex-direction: column;
					width: calc(100% - 120upx);
					margin-left: 20upx;

					.c-title {
						font-size: 34upx;
						font-weight: 600;
					}

					.c-desc {
						color: #666;
						font-size: 28upx;
						margin: 8upx 0;
						margin-bottom: 16upx;
					}

					.tags {
						display: flex;

						.tag {
							background-color: $uni-color-bg-s;
							padding: 8upx 16upx;
							font-size: 26upx;
							margin-right: 8upx;
							color: $uni-color-primary;
						}
					}
				}
			}
		}

		.scan {
			position: fixed;
			bottom: 30upx;
			width: 80vw;
			left: 10vw;
		}
	}

	.covers-content {
		position: absolute;
		width: calc(100% - 60upx);
		left: 30upx;
		background-color: #fff;
		border-radius: 8upx;
		bottom: 60upx;
		z-index: 999;
		padding-top: 22upx;
		box-sizing: border-box;

		.road {
			display: flex;
			align-items: center;
			background-color: #fff;
			padding: 22upx 30upx;
			margin-bottom: 22upx;

			image {
				width: 100upx;
				height: 100upx;
			}

			.c-content {
				display: flex;
				flex-direction: column;
				width: calc(100% - 120upx);
				margin-left: 20upx;

				.c-title {
					font-size: 34upx;
					font-weight: 600;
				}

				.c-desc {
					color: #666;
					font-size: 28upx;
					margin: 8upx 0;
					display: flex;
					justify-content: space-between;
				}

				.tags {
					display: flex;

					>view {
						margin-right: 8upx;
					}
				}
			}
		}
	}

	.map-filter {
		position: absolute;
		top: 22upx;
		left: 50%;
		transform: translateX(-50%);

		.filter {
			background-color: #fff;
			border-radius: 30upx;
			width: 280upx;
			display: flex;
			margin: 0 auto;
			height: 70upx;
			margin-bottom: 0;
			align-items: center;

			cover-view {
				border-radius: 30upx;
				width: 140upx;
				text-align: center;
				line-height: 66upx;
				height: 100%;
				box-sizing: border-box;
			}

			.active {
				background-color: $uni-color-bg-z;
				color: #fff;
			}
		}

	}

	.map-scan {
		position: absolute;
		bottom: 30upx;
		width: 80vw;
		left: 50%;
		transform: translateX(-50%);
		background-color: #2ea780;
		color: #fff;
		font-size: 36upx;
		text-align: center;
		line-height: 2;
		border-radius: 20upx;

		// .scan {
		// 	position: relative;
		// 	width: 80vw;
		// 	bottom: 0;
		// 	left: 0;
		// }
	}
</style>